import React from 'react';
import { withRouter } from 'react-router';
import { connect } from 'react-redux';
import Widget from '../mui/Widget.js';
import Input from '../base/Input.js';
import userManageAction from '../../actions/userManageAction.js';
import EditSuccess from './editSuccess.js';
import validate from '../../utils/Validate.js';
import Tool from '../../utils/ToolUtils.js';

const EditPasswd = withRouter(
  React.createClass({
    getInitialState() {
      return {
        disableButton: false,
        newPasswdMsg: false,
        formData: {
          passwd: '',
          passwd_new: '',
          passwd_new2: ''
        }
      };
    },
    componentWillMount() {
      const token = Tool.locals.getSession('token');
      if (!token) {
        this.props.router.push('/');
      }
    },
    // 离开清理数据
    // ===========
    componentWillUnmount() {
      this.props.restoreTestPackage();
    },
    handleChange(targetData) {
      // 序列化表单
      // ============
      const fData = this.state.formData;
      fData[targetData.name] = targetData.value;
      this.setState({
        formData: fData,
      });
      // 如果有为空情况，不能点击保存按钮
      // ==============================
      for (const key in fData) {
        if (!fData[key]) {
          this.setState({ buttonState: false });
          break;
        } else {
          this.setState({ buttonState: true });
        }
      }
    },
    checkOldPasswd() {
      const { editPasswd } = this.props;
      const { formData } = this.state;
      editPasswd(formData);
    },
    checkNewPasswd() {
      const { formData } = this.state;
      if ((formData.passwd_new !== formData.passwd_new2) && formData.passwd_new && formData.passwd_new2) {
        this.setState({ newPasswdMsg: true });
      } else {
        this.setState({ newPasswdMsg: false });
      }
    },
    handleSubmit() {
      const { editPasswd } = this.props;
      const { formData } = this.state;
      if ($('.form-error').length) {
        return;
      }
      editPasswd(formData);
    },
    render() {
      const v1 = { data : {} };
      v1.data[validate.passwd] = '密码不符合规范';
      v1.minLengthChar = { min:9, message:'密码不符合规范' };
      v1.maxLengthChar = { max:16, message:'密码不符合规范' };
      const { formData, buttonState, newPasswdMsg } = this.state;
      const { saveMsg } = this.props;
      const button = <button className="btn btn-primary" onClick={this.handleSubmit}>保存</button>;
      const disableButton = <button className="btn btn-disable" disabled="disabled">保存</button>;
      return (
        <div>
          <div>
            <Widget widgetHeader={'账号管理'} widgetHeaderTwo={'修改密码'} />
            <div className={saveMsg.code !== 200 ? 'f-group-590 mw1050' : 'none'}>
              <div className="form-group">
                <label className="control-label" htmlFor="passwd">旧密码</label>
                <div className="input-group">
                  <Input
                    data-target="passwd"
                    type="password"
                    value={formData.passwd}
                    onChange={this.handleChange}
                    onBlur={this.checkOldPasswd}
                    placeholder="请输入旧密码"
                  />
                  {saveMsg.code === 404 ? <span className="form-error text-danger">旧密码输入错误</span> : ''}
                </div>
              </div>
              <div className="form-group">
                <label className="control-label" htmlFor="passwd_new">新密码</label>
                <div className="input-group">
                  <Input
                    data-target="passwd_new"
                    type="password"
                    validate={v1}
                    value={formData.passwd_new}
                    onChange={this.handleChange}
                    onBlur={this.checkNewPasswd}
                    placeholder="10-16位，至少包括1个小写字母，一个大写字母，1个数字及1个特殊符号"
                    maxLength={16}
                  />
                </div>
              </div>
              <div className="form-group">
                <label className="control-label" htmlFor="passwd_new2">再次输入</label>
                <div className="input-group">
                  <Input
                    data-target="passwd_new2"
                    type="password"
                    value={formData.passwd_new2}
                    onChange={this.handleChange}
                    onBlur={this.checkNewPasswd}
                    placeholder="再次输入密码"
                  />
                  {newPasswdMsg ? <span className="form-error text-danger">两次密码输入不一致</span> : ''}
                </div>
              </div>
              <div className="ml108">
                {buttonState ? button : disableButton}
              </div>
            </div>
          </div>
          {saveMsg.code === 200 ? <EditSuccess /> : ''}
        </div>
      );
    }
  })
);

const mapStateToProps = function (state) {
  return {
    saveMsg: state.userManage.editPsdMsg
  };
};

module.exports = connect(mapStateToProps, userManageAction)(EditPasswd);
